<template>
<div>
    <div id="top">
        <h3>门店防区添加</h3>
        <h2>
            <button v-for="item,index in layoutPics" type="button" class="btn btn-default" @click="setSel(index)" >
                <span>{{item.name}}</span> 
            </button>
        </h2>
    </div>
    <div id="content">
        <div v-for="value, idx in layoutPics" v-if="idx == selectedLayerIdx">
            <div class="img-container">
                <img :src="value.pic" :id="'layoutAreas_for_'+idx" class="img-overlay" @click.prevent.stop="AddArea( $event, idx ) ">
                    <div v-for="(a,index) in aArmAreas"  class="anchor " :style= "{ top:a.y+'px', left: a.x +'px'}" v-show="a.l == idx">
                        <label style="position:absolute;top:-20px;left:20px;">  
                            <button type="button" class="btn btn-info btn-xs" @click.prevent.stop="RemoveArea(index)">
                                <span class="glyphicon glyphicon-remove"></span>
                            </button>
                        </label>
                        <input style="background-color:transparent; width:20px; heigh:20px; border:0px ; font:black;" v-model.number="a.id">
                    </div>
                </img>
            </div>
        </div>
    </div>
    <div id="footer" >
        <router-link tag="button" to="layoutPic" class="btn btn-primary" @click.native="$store.commit('setStep',4)"> 上一步</router-link>
        <router-link tag="button" to="video" class="btn btn-primary" @click.native="$store.commit('setStep',6); commitArmAreas()" :disabled="aArmAreas.length <=0 "> 下一步</router-link>    
    </div>
    
</div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return {
           selectedLayerIdx: 0,
           currentAreaNum: 0,
           aArmAreas:{},
        }
    },
    methods:{
        setSel(index) {
            this.selectedLayerIdx = index;
        },
        commitArmAreas(){
            var arm_areas = {};
            for( let idx in this.aArmAreas ){
                let id =  parseInt( this.aArmAreas[idx].id );
                if( id ){
                    arm_areas[id] = {};
                    arm_areas[id].l = this.aArmAreas[idx].l;
                    arm_areas[id].x = this.aArmAreas[idx].x;
                    arm_areas[id].y = this.aArmAreas[idx].y;
                }
            }
            this.$set( this.$store.state, 'arm_areas', arm_areas );
        },

        AddArea( e, layer_idx ) { 
            this.$set( this.aArmAreas, this.currentAreaNum++, {
                id:null,
                l: layer_idx,
                x: e.offsetX , 
                y: e.offsetY
            })
            console.log( 'add Area : ', this.aArmAreas );
        },

        RemoveArea( arm_area_number ){
            console.log( "remove area");
            console.log( arm_area_number );
            console.log( this.aArmAreas);
            this.$delete( this.aArmAreas, arm_area_number);
        },
    },
    computed: {
        layoutPics(){
            return this.$store.state.layoutPic;
        },
    },
}

</script>



<style scoped>
#top h3{
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
}
#top h2{
    width: 90%;
    margin: 0 auto;
    font-size: 0px;
}
#top button{
    margin-right: 10px;
    border-bottom: none;
}
#content form{
    width: 600px;
    margin: 30px auto;
}
#content form label{
    font-size: 20px;
}
#floorname{
    display: inline-block;
    width: 200px;
}
#inputLayout{
    width: 200px;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
}
.img-container{
    border: 1px solid grey;
    position: relative;
    display: block;
}
.img-overlay{
    position: absolute;
    left: 0px;
    top: 0px;
}
#pic{
    display: block;
    margin: 0 auto;
}
.anchor{ 
    position: absolute;
    font-weight: bold;
    font-size:20px;
    width: 32px;
    height: 32px;

    text-align: center;
    white-space: nowrap;
    vertical-align: middle;

    border-radius: 16px;
    border: 2x #0cb solid;
    background-color: #0cd;
}
#content{
    width: 90%;
    margin: 0 auto;
    height: 500px;
    background-color:#f1f1f1;
    overflow: auto;
    position: relative;
}
#footer{
    margin: 50px auto 0px;
    width: 600px;
    text-align: center;
}

#footer button{
    margin: 0px 20px;
}

#inner{
    position: absolute;
    left: 50%;
    top: 50%;   
    transform: translateY(-50%) translateX(-50%);
}
</style>
